<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
    <link rel="stylesheet" href="css/login.css">
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div>
    <div id="t_div"><!--页头-->

        <div>
            <div id="d1">
                <h1>登录页面</h1>
            </div>
            <input type="button" class="lo" id="reg" value="注册" onclick="window.open('/register.html')">
        </div>
    </div>
    <div id="b_div"><!--内容-->
        <div>
            <form action="">
                <table >
                    <tr>
                        <td> <p>用户名:</p></td>
                        <td> <input id="username" class="cl" type="text" name="username" maxlength="11"
                                    placeholder="请输入手机号">
                        </td>

                    </tr>
                    <tr><td colspan="2" align="right"><span id="span_username"></span></td></tr>
                    <tr>
                        <td> <p>密码:</p></td>
                        <td>  <input class="cl" type="password" name="password" maxlength="20" minlength="6" id="passwordCut"
                                     placeholder="请输入密码">
                           </td>
                    </tr>
                    <tr> <td colspan="2" align="right"><span id="span_password"></span></td></tr>
                    <tr>
                        <td> <p>记住账号和密码:</p></td>
                        <td>  <input  type="checkbox" name="rem" id="check">
                        </td>
                    </tr>
                </table>
                <input type="button" id="lo" class="lo" value="登录">
            </form>
        </div>
    </div>
</div>
</body>
<script>
    let flag1 = false;
    let flag2 = false;
    $("#username").blur(function () {
        // alert($(this).val());
        let str = $(this).val();
        let ret = /^[\d]{1,20}$/;
        if(ret.test(str)){
            // alert('ok');
            if (str.length != 11){
                $("#span_username").text("手机号长度有误")
                flag1 = false;
            }else {
                flag1 = true;
                $("#span_username").text("")
            }
        }else{
            if (str.length<1){
                $("#span_username").text("手机号不能为空")
                flag1 = false;
            }
        else
            {
                flag1 = false;
                $("#span_username").text("手机号格式有误")
            }

        }

    })
    $("#passwordM").blur(function () {
        // alert($(this).val());
        let str = $(this).val();
        let ret =/^[a-zA-Z0-9][a-zA-Z0-9_]{5,20}$/;
        if(ret.test(str)){
            if (str.length < 6&&str.length>11){
                $("#span_password").text("密码长度有误")
                flag2 = false;
            }else{
                $("#span_password").text("")
                flag2 = true;
            }
        }else{
            flag2 = false;
            if (str.length<1){
                $("#span_password").text("密码不能为空")
            }
        }
    })
    $("#lo").click(function () {
        // alert(flag1+""+flag2)
        if ($("input:eq(0)").val() != null&&$("input:eq(1)").val() != null ){
            let data = new FormData($("form")[0])
            axios.post("/login",data).then(function (response) {
                // alert(response.data)
                    switch (response.data) {
                            case 1:
                                location.href="index.html";
                                break;
                            case 2:
                                alert("密码错误")
                                break;
                            case 3:
                                alert("用户名不存在请注册")
                                break;
                    }
            }).catch(function (err) {
                alert(err)
            })
        }else {
            alert("账号或密码有误")
        }
    })
    let cookie = document.cookie;
    let cookies = cookie.split(";");
    for (let cookieStr of cookies){
        if (cookieStr.indexOf("username")!=-1){
            let username = cookieStr.split("=")[1];
            $("#username").val(username);
        }
        if (cookieStr.indexOf("password") != -1){
            let password = cookieStr.split("=")[1];
            $("#passwordCut").val(password);
        }
    }
</script>
</html>